<template>
  <el-row class="content">
    <el-col :span="12">
      <div>
        <h3>Sign In to <span>PersonnalChat</span></h3>
        <p>You can communicate with friends from different places in PersonalChat</p>
        <input v-model="userInfo.userName" placeholder="Username">
        <input v-model="userInfo.userPassword" placeholder="Password" type="password">
        <el-checkbox v-model="remember" size="medium">Remember me</el-checkbox>
        <div>
          <el-button type="success" class="loginButton" @click="login">Log in</el-button>
        </div>
      </div>
    </el-col>
    <el-col :span="12">
      <img src="@/assets/img/user/undraw_file_sync_ot38.svg" alt="" class="bg">
    </el-col>
  </el-row>
</template>

<script>
import io from 'socket.io-client'
export default {
  name: "login",
  data() {
    return {
      socket: null,
      userInfo: {
        userName: '',
        userPassword: '',
        isLoginSucceed: false,
        loginDate: ''
      },
      remember: false,
    }
  },
  methods: {
    // 验证user信息
    userVerify() {
      this.userInfo.isLoginSucceed = true
      this.userInfo.loginDate = new Date().toLocaleString('chinese', { hour12: false }) 
      return true
    },
    login() {
      const flag = this.userVerify()
      if (!flag) return this.$message.error('账号或者密码错误！')
      this.socket = io('http://localhost:80')
      this.$store.commit('loginSucceed', this.userInfo)
      this.socket.emit('loginSucceed', this.userInfo)
      this.$message.success('Login succeeded')
      this.$router.replace('/home')
    }
  },
}
</script>

<style lang='less' scoped>
.content {
  width: 800px;
  height: 500px;
  margin: 100px auto;
  padding: 20px;
  font-family: "Roboto", sans-serif;

  h3 {
    font-size: 25px;
    font-weight: 400;
  }

  span {
    font-size: 25px;
    font-weight: 700;
  }

  p {
    font-weight: 300;
    color: #b3b3b3;
    margin-bottom: 25px;
  }

  .bg {
    width: 478px;
    margin-top: 50px;
  }

  .el-checkbox {
    color: #888;
    font-size: 16px;
    margin: 25px 0;
  }

  .loginButton {
    width: 325px;
    height: 70px;
    background-color: #38d39f;
    font-size: 23px;
    border-radius: 10px;
  }

  .loginButton:hover {
    background-color: #27b183;
  }
}

input {
  display: block;
  width: 325px;
  height: 50px;
  outline: none;
  border: 0;
  border-bottom: 1px solid #38d39f;
  // border-color: #38d39f;
}
</style>